<template>
  <div class="menu-item">
    <img class="img" :src="data.picture" />
    <div class="menu-item-right">
      <p class="item-title">{{data.name}}</p>
      <p class="item-desc two-line">{{data.description}}</p>
      <p class="item-zan">{{data.praise_content}}</p>
      <p class="item-price">¥{{data.min_price}}<span class="unit">/{{data.unit}}</span></p>
    </div>
    <div class="select-content">
      <div  class="minus" v-if="data.chooseCount > 0" @click="minus"></div>
       <div class="count" v-if="data.chooseCount > 0">{{data.chooseCount}}</div>
      <div  class="plus" @click="plus"></div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
      }
    },
    props:['data','index'],
    components: {

    },
    mounted() {

    },
    methods:{
      minus(){

        this.$store.commit('minus',{index:this.index})
        this.$forceUpdate()
      },
      plus(){
        this.$store.commit('plus',{index:this.index})
        this.$forceUpdate()
      },
      viewrender(){
       //执行强制渲染
        this.$forceUpdate()
      }

    }
  }
</script>

<style lang="stylus" scoped>
  .menu-item {
    display: flex;
    padding-top: (0.5rem);
    padding-bottom: (0.5rem);
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    .img {
      width: 1.24rem;
      height: 1.24rem;
      margin-right: (0.2rem);
    }
    .menu-item-right {
      flex: 1;
    }
    .item-title {
      font-size: (16px);
      color: #2f2f2f;
    }
    .item-desc,.item-zan {
      color: #a9a9a9;
      font-size: (12px);
      margin-top: (0.12rem);
      line-height: (0.28rem);
      padding-right: (0.08rem);
      &.item-desc {
        line-height: (0.34rem);
      }
    }
    .item-price {
      margin-top: (0.2rem);
      color: #fe4d3d;
      font-size: (18px);
    }
    .unit {
      color:#a9a9a9;
      font-size: (12px);
    }
    .select-content {
      position: absolute;
      right: (0.18rem);
      bottom: (0.42rem);
      display: flex;
    }
    .plus {
      width: (0.5rem);
      height: (0.5rem);
      background-size: 100% 100%;
      background-image: url('/app2/img/plus.png');
    }
    .minus {
      width:(0.5rem);
      height: (0.5rem);
      background-size: 100% 100%;
      background-image: url('/app2/img/minus.png');
    }
    .count {
      font-size: (15px);
      color: #2f2f2f;
      width: 0.4rem;
      height: (0.5rem);
      line-height: (0.5rem);
      margin-left: (0.04rem);
      margin-right: (0.04rem);
      text-align: center;
    }
  }
</style>
